<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" id="extraCss" href="" />
    <title data-i18n="main.programName">雀魂Plus</title>
  </head>
  <body>
    <h1 data-i18n="main.programName">雀魂Plus</h1>
    <span class="close-btn" id="closeBtn"></span>
    <div class="main-context">
      <!-- 左侧选单 -->
      <div class="left-panel" id="leftPanel">
        <ul>
          <li data-target="modPage" data-i18n="main.mod">模组</li>
          <li data-target="executePage" data-i18n="main.execute">插件</li>
          <li data-target="toolPage" data-i18n="main.tool">工具箱</li>
          <li data-target="settingPage" data-i18n="main.setting">设置</li>
          <li data-target="aboutPage" data-i18n="main.about">关于</li>
        </ul>
      </div>

      <!-- 模组页面 -->
      <section data-name="modPage">
        <button id="refreshMod" class="big-btn refresh-btn"></button>
        <button id="installMod" class="big-btn install-btn"></button>
        <button id="editMod" class="big-btn edit-btn"></button>
        <div id="modInfos" class="info-cards">
          <article>
            <img src="" />
            <h3>千织普通改绿头鸭</h3>
            <address>Handle</address>
            <p>
              图片来源pixabay，由Capri23auto上传，CC0协议\n这是一个Mod示范，用途为将普通千织立绘和头像改为绿头鸭。
            </p>
            <input type="checkbox" />
            <button id="mod0_export" class="export-btn"></button>
            <button id="mod0_remove" class="remove-btn"></button>
          </article>
        </div>
      </section>

      <!-- 插件页面 -->
      <section data-name="executePage">
        <button id="refreshExecute" class="big-btn refresh-btn"></button>
        <button id="installExecute" class="big-btn install-btn"></button>
        <button id="editExecute" class="big-btn edit-btn"></button>
        <div id="executeInfos" class="info-cards">
          <article>
            <img src="" />
            <h3>强制开启语音报番型</h3>
            <address>aoarashi1988</address>
            <p>可以强制在本地打开报番型效果。</p>
            <input type="checkbox" />
            <button id="execute0_export" class="export-btn">导出</button>
            <button id="execute0_remove" class="remove-btn">删除</button>
          </article>
        </div>
      </section>

      <!-- 工具页面 -->
      <section data-name="toolPage">
        <button id="refreshTool" class="big-btn refresh-btn"></button>
        <button id="installTool" class="big-btn install-btn"></button>
        <button id="editTool" class="big-btn edit-btn"></button>
        <div id="toolInfos" class="info-cards"></div>
      </section>

      <!-- 设置面板 -->
      <section data-name="settingPage">
        <button id="saveConfigs" class="big-btn save-btn"></button>
        <div id="settingInner" class="setting-innner">
          <h3>窗口</h3>
          <input
            type="checkbox"
            name="windowSettings1"
            id="windowSettings1"
          /><label for="windowSettings1">设置描述（Text）</label>
          <h3>更新</h3>
          <input
            type="checkbox"
            name="updateSettings1"
            id="updateSettings1"
          /><label for="updateSettings1">获取浏览版(Get Pre-releases)</label>
        </div>
      </section>

      <!-- 关于页面 -->
      <section data-name="aboutPage">
        <!-- <button id="saveConfigs" class="big-btn save-btn"></button> -->
        <div id="aboutInner" class="about-innner"></div>
      </section>

      <!-- 底部面板 -->
      <div class="bottom-panel">
        <span id="serverInfo" data-server-index="0"
          ><span id="serverInfoTitle" data-i18n="main.server">服务器</span>:
          <span id="serverText" data-i18n="main.loading">加载中</span></span
        >
        <span id="pingInfo" class="offline"
          ><span data-i18n="main.delay">Ping</span>:
          <span id="pingText">--</span>
          <span data-i18n="main.millisecond">ms</span></span
        >
        <button id="launch" class="launch-btn" data-i18n="main.launch">
          启动游戏
        </button>
      </div>
    </div>

    <!-- 版本卡标签 -->
    <div id="updateCard" class="update-card">
      <h3 data-i18n="update.newVersionWasFound">发现新版本</h3>
      <p>
        <span data-i18n="update.currentVersion">您的版本</span>
        <span id="localVersion">v1.0.0</span><br />
        <span data-i18n="update.latestVersion">最新版本</span>
        <span id="remoteVersion">v1.0.0</span><br />
        <span data-i18n="update.publishAt">发布于</span>
        <span id="publishTime">2000/2/30 下午11:11:11</span>
      </p>
      <button
        id="updateCard_close"
        class="updateCard_close"
        data-i18n="update.tellMeNextTime"
      >
        下次提醒我
      </button>
      <button
        id="updateCard_view"
        class="updateCard_view"
        data-i18n="update.gotoPublishPage"
      >
        前往发布页
      </button>
      <button
        id="updateCard_autoupdate"
        class="updateCard_view hide"
        data-i18n="update.updateNow"
      >
        下载更新
      </button>
    </div>
    <div id="downloadCard" class="update-card">
      <h3 id="downloadCardTitle" data-i18n="update.downloading">
        正在下载更新
      </h3>
      <p id="downloadCardText">
        <span data-i18n="update.downloadingTip">正在从服务器获取更新中</span
        ><br />
        <span data-i18n="update.pleaseWait">请稍后……</span><br />
        <span id="downloadCardSpeed" data-i18n="update.connecting"
          >连接资源……</span
        >
      </p>
      <button
        id="downloadCard_install"
        class="updateCard_view"
        disabled
        data-i18n="update.installAndRelaunch"
      >
        安装并重启
      </button>
    </div>
    <!-- 版本卡标签结束 -->

    <!-- <script src="./manager.js"></script> -->
    <script src="./main.js"></script>
  </body>
</html>
